<template>
  <div id="center">
      <div class="centerPer">
        <div class="topcenter">
          <li><a href="/">首页</a>&gt;个人中心</li>
          <div class="xf" v-show="isshow">
            <router-link :to="{name: 'expenditure'}" class="left">消费规则</router-link> <span class="center">|</span> <span class="right" @click="guize">U币规则</span>
          </div>
        </div>
        <div class="databox">
          <div class="data">
              <div class="photo">
                  <img :src="headPortrait" alt=""/>
                  <p >{{headName}}</p>
              </div>
              <ul class="name">
                <router-link tag="li" :to="{name:'task'}" ><i class="icon iconfont icon-zhengjianhao-copy"></i>任务中心</router-link>
                <router-link tag="li" :to="{name:'personal'}"><i class="icon iconfont icon-gerenziliao"></i>个人资料</router-link>
                <router-link tag="li" :to="{name:'invitedShare'}"> <i class="icon iconfont">&#xe690;</i>邀请分享</router-link>
                <router-link tag="li" :to="{name:'password'}"> <i class="icon iconfont icon-xiugaimima"></i>修改密码</router-link>
              </ul>
          </div>
          <div class="dataRight">
            <router-view></router-view>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import { mapState} from 'vuex';
export default {
  name: 'center',
  data () {
    return {
      people: require('../assets/images/survey.png'),
      isshow: true,
      info: ''
    };
  },
  watch: {
    '$route': function (newroute, oldroute) {
      if (newroute.path.toLowerCase() === '/center/task') {
        this.isshow = true;
      } else {
        this.isshow = false;
      }
    }
  },
  created () {
    if (this.$route.path.toLowerCase() !== '/center/task') {
      this.isshow = false;
    }
  },
  mounted () {
  },
  beforeDestroy: function () {
    this.$bus.$emit('comAlert');
  },
  methods: {
    guize () {
      this.$bus.$emit('comAlert', {
        title: 'U币使用规则',
        infoHtml: `<div class="eggRule">
                <div>
                    <b><span class="num">1</span> U币是用来做什么的？</b>
                    <p>U币可以用来体验虚拟机，<span class="bottom_color">一个U币可以体验10分钟。</span></p>
                </div>
            </div>
            <div class="eggRule">
                <div>
                    <b><span class="num">2</span> 如何获取U币？</b>
                    <p><span class="bottom_color">完成系统任务</span>可以获取对应数量的U币。</p>
                </div>
            </div>`,
        button: [
          {
            text: '确定',
            callback: () => {
            }
          }
        ]
      });
    }
  },
  computed:{
    ...mapState(["headPortrait","headName"]),
}
};
</script>

<style lang="scss">
$sbcolor: #10a57d;
  #center {
    .centerPer {
  width: 1200px;
  margin: 0 auto;
  li {
    list-style: none;
  }
  .topcenter {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    a {
      color: #010101;
      &:hover {
        color: $sbcolor;
      }
    }
    .xf {
    font-size: 16px;
    .left {
      color: black;
      &:hover {
        color: #10a57d;
      }
    }
    .center {
      margin: 0 16px;
      color: #10a57d;
    }
    .right {
      cursor: pointer;
      &:hover {
        color: #10a57d;
      }
    }
  }
  }
  .databox {
    overflow: hidden;
  }
  .data {
    width: 291px;
    background: rgba(238, 243, 247, 1);
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
    float: left;
    .photo {
      height: 182px;
      text-align: center;
      padding-top: 29px;
      border-bottom: 1px solid #DFDFDF;
      img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        overflow: hidden;
        margin-bottom: 20px;
      }
    }
    .name {
      background-color: #eef3f7;
      height: 460px;
    }
    .name li {
      padding: 15px 0;
      padding-left: 25%;
      cursor: pointer;
      color: #424242;
      &.router-link-exact-active  {
        background: #10a57d;
        color: white;
      }
    }
    .name li i {
      margin-right: 10px;
      vertical-align: middle;
      font-size: 26px;
    }
  }
  .dataRight {
    margin-top: 20px;
    float: right;
    width: 896px;
    height: auto;
    padding-bottom: 20px;
    position: relative;
  }
}
  }

</style>
